<template>
    <el-scrollbar style="height: calc(100vh - 110px)">
        <el-form :model="Enterprise_practice_exercise" label-position="top" size="large" ref="Enterprise_practice_exercise_form">
            <el-row justify="center" style="margin-top: 50px">
                <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="16">
                    <el-row justify="space-between" v-for="(item, index) of Enterprise_practice_exercise.enterprisePracticeList">
                        <el-col :span="24">
                            <el-row justify="space-between" :gutter="16">
                                <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4">
                                    <el-form-item label="时间" :prop="`enterprisePracticeList.${index}.e_time`" :rules="{required: true, message: '请选择时间', trigger: 'blur'}">
                                        <el-date-picker start-placeholder="开始时间" end-placeholder="结束时间" type="daterange" v-model="item.e_time" value-format="YYYY-MM-DD"></el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4">
                                    <el-form-item label="企业名称" :prop="`enterprisePracticeList.${index}.e_name`" :rules="{required: true, message: '请输入企业名称', trigger: 'blur'}">
                                        <el-input placeholder="请输入企业名称" v-model="item.e_name"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4">
                                    <el-form-item label="岗位" :prop="`enterprisePracticeList.${index}.e_post`" :rules="{required: true, message: '请输入岗位', trigger: 'blur'}">
                                        <el-input placeholder="请输入岗位" v-model="item.e_post"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4">
                                    <el-form-item label="天数" :prop="`enterprisePracticeList.${index}.e_days`" :rules="{required: true, message: '请输入天数', trigger: 'blur'}">
                                        <el-input-number placeholder="请输入天数" :min="0" v-model="item.e_days"></el-input-number>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4">
                                    <el-form-item label="学时数" :prop="`enterprisePracticeList.${index}.e_hours`" :rules="{required: true, message: '请输入学时数', trigger: 'blur'}">
                                        <el-input-number placeholder="请输入学时数" :min="0" v-model="item.e_hours"></el-input-number>
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4">
                                    <el-button type="danger" style="margin-top: 34px" @click="remove_btn('enterprisePracticeList', index)">删除此项</el-button>
                                </el-col>
                            </el-row>
                        </el-col>
                        <div class="line"></div>
                    </el-row>
                    <el-button style="margin-bottom: 35px" type="primary" @click="add_btn('enterprisePracticeList')">添加</el-button>
                </el-col>
            </el-row>

            <el-affix position="bottom" :offset="0">
                <el-button style="position: absolute;bottom: 50px;right: 10%;" @click="submit" type="success" :loading="isLoading">提交 “企业实践锻炼”</el-button>
            </el-affix>
        </el-form>

    </el-scrollbar>
</template>

<script>
import {ElLoading, ElMessage} from "element-plus";
import useStore from "../../store/store";

const store = useStore()
export default {
    name: "Enterprise_practice_exercise",
    data() {
        return {
            Enterprise_practice_exercise: {
                user_id: store.user_id,
                enterprisePracticeList: [               // 企业实践锻炼
                    {
                        e_time: [],                     // 时间
                        e_name: '',                     // 企业名称
                        e_post: '',                     // 岗位
                        e_days: '',                     // 天数
                        e_hours: '',                    // 学时数
                    }
                ]
            },
            isLoading: false
        }
    },
    methods: {
        add_btn(type) {
            if (type === 'enterprisePracticeList') {
                this.Enterprise_practice_exercise.enterprisePracticeList.push({
                    e_time: [],                     // 时间
                    e_name: '',                     // 企业名称
                    e_post: '',                     // 岗位
                    e_days: '',                     // 天数
                    e_hours: '',                    // 学时数
                })
            }
        },
        remove_btn(type, index) {
            if (type === 'enterprisePracticeList') {
                this.Enterprise_practice_exercise.enterprisePracticeList.splice(index, 1)
            }
        },
        submit() {
            this.$refs.Enterprise_practice_exercise_form.validate(validate => {
                if (!validate) return false
                this.push()
            })
        },
        push() {
            this.Enterprise_practice_exercise.type = "6002"
            this.isLoading = true
            this.Enterprise_practice_exercise.user_id = store.user_id
            this.$api.pushTeacherCorpPracticalData(this.Enterprise_practice_exercise).then(
                response => {
                    if (response.data.isSaved === true) {
                        ElMessage.success({
                            message: '企业实践锻炼提交成功！'
                        })
                    } else {
                        ElMessage.error({
                            message: '提交失败'
                        })
                    }
                    this.isLoading = false
                },
                error => {
                    console.log(error)
                    ElMessage.error({
                        message: error.message
                    })
                    this.isLoading = false
                }
            )
        }
    },
    mounted() {
        const loading = ElLoading.service({
            target: document.querySelector('.el-main'),
            text: '请稍候...'
        })
        this.$api.pullTeacherCorpPracticalData(store.user_id).then(
            response => {
                this.Enterprise_practice_exercise = response.data
                loading.close()
            },
            error => {
                console.log(error)
                ElMessage.error(`${error.message}---- 请求数据失败`)
                loading.close()
            }
        )
    }
}
</script>

<style scoped>

</style>